<template>
    <template v-for="item,index in localFormData.imageSet" :key="index">
        <el-row justify="space-between">
            <el-col :span="4" class="mediatitle">图集{{index+1}}</el-col>
            <el-col :span="4" class="right">
                <el-button @click="handleDelImage(index)" size="mini" class="tjbtn">
                    <el-icon><delete /></el-icon>
                    <span>删除</span>
                </el-button>
            </el-col>
        </el-row>
        <el-row class="tjbox mt15">
            <el-col :span="24">
                <el-form-item label="标题">
                    <el-input v-model="item.itemtitle" placeholder="请输入标题"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
            <el-form-item label="描述" class="txtareabox">
                <el-input v-model="item.itemdesc" type="textarea" placeholder="请输入描述"></el-input>
            </el-form-item>
            </el-col>
        </el-row>
            <el-form-item label="缩略图">
                <ul class="imglist">
                    <li v-if="item.imgid">
                        <el-image
                            :src="item.imageUrl"
                            :initial-index="index"
                            fit="scale-down" style="width:160px;height:160px"
                        />
                        <a class="edit-image" href="javascript:;" @click="handleImageList(index)">更换图片</a>
                    </li>
                    <li v-else class="imgplus" @click="handleImageList(index)">
                        <div>
                        <el-icon>
                            <plus />
                        </el-icon>
                        <!-- <p style="color:#999" class="m-b-0 m-t-10">添加封面</p> -->
                        </div>
                    </li>
                </ul>
            </el-form-item>
            <el-divider></el-divider>
    </template>
    <el-button @click="handleAddImage" class="btn-add">添加图集</el-button>
    <rel-image-medium
        ref="selectImageRef"
        :dialogRelImageVisible="selectImageDialog"
        :dialogRelImageTitle="selectImageTitle"
        :dialogRelImageFormData="selectImageFormData"
        dialogRelAction="createmedia"
        dialogSelectType="radio"
        @handleCancelRelImageDialog="selectImageCancelDialog"
        @reloadMediaData="selectImageComplete"
    />
</template>

<script>
    import {Plus,Delete} from '@element-plus/icons'
    import {toRef, ref, reactive, nextTick} from 'vue'
    import RelImageMedium from '../Medium/RelImageMedium'
    export default {
        name: "",
        components: {Plus,Delete,RelImageMedium},
        props: {
            formData: {
                type: Object
            },
        },
        setup(props) {
            const localFormData = toRef(props, 'formData')
            // localFormData.value.imageSet = []
            // console.log('imageset', localFormData.value.imageSet)
            const handleAddImage = () =>{
                localFormData.value.imageSet.push({})
            }
            const handleDelImage = (key) => {
                console.log(localFormData.value.imageSet)
                localFormData.value.imageSet.splice(key,1)
            }


            const handleOnChange = (file, item) => {
                item.imageInfo = file
                item.imageUrl = URL.createObjectURL(file.raw)
                /*const filterRes = fileList.filter(f => f.name === files.name && f.size === files.size)
                filterRes.length > 1 && fileList.pop()
                localFormData.value.thumb = fileList*/
                // uploadImgObj['thumb'] =  = fileList
            }

            // 图片弹窗
            const imageSetIndex = ref(null)
            const handleImageList = (index) => {
                imageSetIndex.value = index
                selectImageDialog.value = true
                nextTick(() => {
                    selectImageRef.value.init()
                })
            }
            const selectImageRef = ref(null)
            const selectImageDialog = ref(false)
            const selectImageTitle = ref('选择封面')
            const selectImageFormData = reactive({
                datas:[]
            })
            const selectImageCancelDialog = () => {
                selectImageDialog.value = false
            }
            const selectImageComplete = (data) => {
                if( data && data.length > 0 ){
                    data.forEach((val) => {
                        if(val.errcode == 0){
                            localFormData.value.imageSet[imageSetIndex.value].imgid = val.data.imgid
                            localFormData.value.imageSet[imageSetIndex.value].imageUrl = val.data.viewurl
                            //console.log(localFormData.value.imageSet)
                        }
                    })

                }
                // Object.assign(localFormData.value.thumb,)
            }


            return {
                localFormData,
                handleAddImage,
                handleDelImage,
                handleOnChange,
                handleImageList,
                selectImageRef,
                selectImageDialog,
                selectImageTitle,
                selectImageFormData,
                selectImageCancelDialog,
                selectImageComplete
            }
        }
    }
</script>

<style scoped  lang="scss">
.mediatitle{
    margin-top: 10px;
    &:first{
      margin-top: 0;
    }
    display:inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
  }
.btn-add{
    width:85%;
    background-color: rgba(222,222,222,0.4);
    color:#3D73F2;
    height: 80px;
    display: block;
    margin:30px auto;
    border:0 !important;
    font-weight: bold;
}
.tjbtn{
    color: #3E7EF6;
    border:1px solid;
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
:deep(.avatar-uploader .el-upload:hover) {
  border-color: #409eff;
}
:deep(.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
:deep(.avatar-uploader-icon svg) {
  margin-top: 74px; /* (178px - 28px) / 2 - 1px */
}
:deep(.avatar) {
  width: 178px;
  height: 178px;
  display: block;
}
.tjbox{
    .el-form-item{
        width:100%;
    }
}
.imglist{
    display: flex;
    flex-wrap: wrap;
    li {
        position: relative;
        width: 160px;
        margin-right: 15px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border:1px solid rgba(153,153,153,0.4);
        border-radius: 4px;
        .edit-image{
        display: flex;
        position: absolute;
        bottom:0;
        right:0;
        padding: 4px 9px;
        color:#fff;
        font-size: 12px;
        background-color: rgba(0,0,0,0.6);
        line-height: normal
        };
        .delete-image {
        display: flex;
        position: absolute;
        top:0;
        right:0;
        padding: 3px;
        .el-icon{
            font-size:20px;
        }
        }
    }
    li.imgplus{
        >div{text-align: center;line-height:normal;}
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items: center;
        width: 160px;
        height: 160px; overflow: hidden;
        border: 1px dashed rgba(153,153,153,0.4);
        background: rgba(222,222,222,0.4); cursor: pointer;
        .el-icon{font-size: 28px;color:#999;}
    }
}
</style>
